<template>
  <div class="map-content">
    <div id="map"></div>
    <div class="overlays">
      <slot name="overlays"></slot>
    </div>
  </div>
</template>
<script>

import OlMapTool from 'ol-map-tool';

export default {
  name: 'MapView',
  props:{
    single: {
      type: Boolean,
      default: true
    },
    data: {
      type: [Object, Array],
      default: ()=>{}
    }
  },
  data() {
    return {
      // 非必填
      config: {},
      ani: {
        trackLayer: false,
        aniLayer: false
      },
      selectData: "",
      olMapTool: null
    }
  },
  watch:{
    data:{
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.getObj()
        }
      }
    }
  },
  mounted() {
    this.initializeMap()
  },
  methods: {
    async getObj(){
      if(this.single){
        // if(this.data.startPointX && this.data.startPointY && this.data.endPointX && this.data.endPointY && this.data.roadData){

          if(this.data.startPointX && this.data.startPointY && this.data.roadData){
          this.$nextTick(() => {
            const attributes = {
              callbackParams: {},
              // callback
            };
            const features = [
              // {
              //   attributes,
              //   geometry: [[Number(this.data.startPointX),Number(this.data.startPointY)],[Number(this.data.endPointX),Number(this.data.endPointY)]],
              //   geometryType: 'MultiPoint',
              // },
              {
                attributes,
                geometry: this.data.roadData,
                geometryType: "MultiLineString"
              },
              {
                attributes,
                geometry: [Number(this.data.startPointX),Number(this.data.startPointY)],
                geometryType: "Point",
                olStyle: {
                  icon: {
                    src: '/gis/mark.png',
                    scale: 0.7,
                    displacement: [0, 20], // 偏移
                  }
                }
              },
              // {
              //   attributes,
              //   geometry: [Number(this.data.endPointX),Number(this.data.endPointY)],
              //   geometryType: "Point",
              //   olStyle: {
              //     icon: {
              //       src: '/gis/end.png',
              //       displacement: [0, 20], // 偏移
              //       scale: 0.7,
              //     }
              //   }
              // },
            ]
            this.addFeatures(features);
            // this.setCenter([Number(this.data.startPointX),Number(this.data.startPointY)],12);
          });
        }
      }else {
        this.$nextTick(() => {
          this.addFeatures(this.data);
        })
      }
    },
    initializeMap() {
      this.config = {
        layerName: 'chinaBlue',
        center: [115.8, 28.7], // 中心坐标
        zoom: 7, // 缩放
        minZoom: 7,
        maxZoom: 21,
        isMoveSelect: true, // 鼠标滑过是否选中
        projection: 'EPSG:4326' // 坐标系
      }
      const resolutions = [
        0.15228550437313793,0.07614275218656896,
        0.03807137609328448,0.01903568804664224,0.00951784402332112,0.00475892201166056,0.00237946100583028,
        0.00118973050291514,5.9486525145757E-4,2.97432625728785E-4,1.5228550437313792E-4,7.614275218656896E-5,
        3.807137609328448E-5,1.903568804664224E-5
      ]
      // 动态底层图层设置 以下是内置默认底层图层 key为图层名称
      const arcgisUrls =
        {
          chinaBlue: {
            name: '高速蓝',
            url: 'http://123.60.28.157:26443/arcgis/rest/services/JxMapblue/MapServer',
            resolutions
          },
          chinaWhite: {
            name: '高速白',
            url: 'http://123.60.28.157:26443/arcgis/rest/services/JxMapblue/MapServer',
            resolutions
          }
        }
      const option = {
        target: 'map', // 元素ID
        config: this.config,
        arcgisUrls, // 动态底图图层
        onEvent: {
          // 选中回调
          onSelectClick: (p) => {
            this.$emit('onSelectClick', p)
          },
          // 鼠标滑过回调
          onPointerMove: (p) => {
            this.$emit('onPointerMove', p)
          }
        }
      }
      this.olMapTool = new OlMapTool(option)
    },
    addFeatures(features) {
      const callback = (p) => {
        this.olMapTool.addOverlay('clickOpen', {
          id: 'clickOpen',
          offset: [0, -25],
          position: p.coordinate,
          autoPan: true,
          autoPanMargin: 100,
          positioning: 'top-right'
        })
      }
      const attributes = {
        callbackParams: {},
        // callback
      };
      const style = {
        stroke: { width: 1, color: '#ffff00' },
        circle: {
          radius: 4, // 直径
          fill: '#ff0000', // 颜色
          stroke: { width: 1, color: '#ffff00' },
        },
      }
      const selectStyle = {
        circle: {
          radius: 6, // 直径
          fill: '#ff0000', // 颜色
          stroke: { width: 2, color: '#ffff00' },
        },
        stroke: { width: 2, color: '#ffff00' },
      }
      const mappingDatas =
        {
          features,
          style,
          selectStyle,
          layerName: 'geometryQuery',
        }
      this.olMapTool.addGeometryLayer(mappingDatas); // or this.olMapTool.addGeometryLayers([mappingDatas]);
    },
    // 加号前面是公里，后面是米

    // 设置中心点
    setCenter(center, zoom) {
      this.olMapTool.setCenter(center, zoom)
      this.config.zoom = zoom
    },
  },
}
</script>
<style scoped lang="less">
.map-content {
  padding: 0;
  box-sizing: border-box;
  background: #FFFFFF;
  position: relative;
  height: 100%;
  width: 100%;
}

#map {
  height: 100%;
  width: 100%;
}

.overlays {
  position: absolute;
  left: -1000px;
  top: 0;
}
</style>
